<template>
   <AppHeader title="发音要领" :banAnimate="true">
    <template #left>
      <img
        @click="onClickLeft"
        src="@/assets/images/icon-back-black.png"
        width="9"
        height="18"
      />
    </template>
  </AppHeader>
  <div class="book-details">
    <div class="content">
      <video controls width="100%" height="211" >
        <source src="https://www.runoob.com/try/demo_source/movie.mp4" type="video/mp4">
        <!-- <source src="movie.ogg" type="video/ogg"> -->
        您的浏览器不支持 video 标签。
      </video>
      <div class="detail-box">
        <div v-html="dataForm.resource.content"></div>
        <audio ref=""  :src="http_mp3_url" controls style="width: 100%;height: 30px;"></audio>
      </div>

    </div>
    <div class="btn" click="complete">
      <van-button type="primary" block round color="linear-gradient( 270deg, #29F19C 0%, #02A1F9 100%)" @click="complete">我读完了</van-button>
    </div>
   </div>

</template>
<script setup>
import { onMounted, ref, nextTick,onBeforeUnmount } from "vue";
import { useRouter ,useRoute} from "vue-router";
import { soundmarkQuestions } from "@/api/writtenTest";

import AppHeader from "@/components/AppHeader.vue";
const router = useRouter();
const route = useRoute();
const dataForm = ref({resource:{},parts:[]})
const http_mp3_url= ref('')
let time = 0
onMounted(async ()=>{
  dataForm.value = JSON.parse(sessionStorage.getItem('soundmark'))
  http_mp3_url.value = dataForm.value.resource.parts[2].list[0].http_mp3_url
}) 
const complete = () => { 
  router.push({
    path: "/phoneticSymbol/complete"
  });
  sessionStorage.setItem('time',time)
  clearInterval(timer)
}
var timer = setInterval(async ()=>{
  time ++
},1000)
onBeforeUnmount(()=>{
  clearInterval(timer)
  timer = null
})
const onClickLeft = () => {
  router.go(-1);
}
</script>
<style scoped lang="scss">
.book-details{
  background: #ffffff;
  height: 100%;
  padding-top: 44px;
  padding-bottom: 20px;
  overflow: scroll;
  .content{
    text-align: center;
    .detail-box{
      text-align: left;
      padding: 10px;
      font-family: PingFangSC, PingFang SC;
      font-weight: 500;
      font-size: 16px;
      color: #333333;
      line-height: 32px;
      text-align: left;
      font-style: normal;
    }
  }
  .btn{padding: 10px;}
}
</style>
